body, html{
    padding:0;
    margin:0;
}

/*共用設定*/
main.promo{
    font-size: 18px;
    color:#353535;
    line-height: 1.833;
    letter-spacing: 1px;
    font-family: "Helvetica Neue",Helvetica,Arial,Microsoft JhengHei,"微軟正黑體", sans-serif;
    cursor: default;
}
main.promo img{ max-width: 100%}
main.promo ul{list-style: none}
main.promo p, main.promo span{ line-height: inherit}
/*副色*/
.kv_sub, .superiority h3, .service h3.spec{
    color: #030000;
}
.dib{ display: inline-block;}






.kv{
    position: relative;
    width: 100%;
    background: #F6F6F6;
    padding: 60px 0 0 50%;
    height: 540px;
    display: flex;
    align-items: center;
}
.kv::before{
    content: "";
    position: absolute;
    width: 70%;
    max-width: 959px;
    height: 100%;
    left: 0;
    top: 0;
    background: #F6F6F6 url(../images/kv_bg_l.jpeg) center / auto 100% no-repeat;
}
.kv-inside{
    position: relative;
    /* padding: 70px 2% 70px 33%; */
}
.kv_title{
    margin-top: 20px;
    font-size: 2.22em;
    line-height: 1.5;
    font-weight: 900;
    color: #D7427E;
    letter-spacing: 4px;    
}
.kv-inside .kv_title{animation-delay: 0.5s}
.kv_sub{
    font-size: 1.3333em;
    font-weight: 700;
    margin: 10px 0 48px;
}
.kv-inside .kv_sub{animation-delay: 0.9s;}

.kv-inside p.animated{ animation-delay: 1.4s}




.superiority{
    width:90%;
    max-width:1170px;
    margin: 0 auto;
    padding: 130px 0 146px;
}
.superiority h2{
    display: inline-block;
    font-size: 1.556em;
    font-weight: 700;
    margin: 10px 0;
    padding: 13px 1.2em 11px;
    background: #D7427E;
    border-radius: 1.5em;
    color: white;    
}

.superiority ul{
    list-style: none;
    margin: 0;
    padding:0;
}
.superiority h3{
    font-size: 1.278em;
    font-weight: 700;
    line-height: 1.6;
    margin: 55px 0 22px;
}
.superiority .color-word{
    color: #D7427E;
}





.promo section.ready{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
    padding: 4%;
    min-height: 377px;
    color: white;
    text-align: center;
    background: #6e267c;
    background: -moz-linear-gradient(top, #6e267c 0%, #6e267c 40%, #6e267c 40%, #ce417d 100%);
    background: -webkit-linear-gradient(top, #6e267c 0%,#6e267c 40%,#6e267c 40%,#ce417d 100%);
    background: linear-gradient(to bottom, #6e267c 0%,#6e267c 40%,#6e267c 40%,#ce417d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6e267c', endColorstr='#ce417d',GradientType=0 );

}
.ready>div:first-child{
    font-size: 2.222em;
    line-height: 1.45;
    font-weight: 900;
}
.ready>div:last-child{
    font-size: 1.111em;
    margin-top: 20px;
}





.question{
    font-size: 1.7778em;
    font-weight: 700;
    text-align: center;
    margin: 3.5% 0 8%;
}
.worry{
    margin: 0 auto;
    padding: 60px 0;
    text-align: center;
    border-bottom: #CBCCCC 1px solid;
}
.worry .leftin{ padding-right: 0}
.worry ul{
    display: inline-block;
    margin: 3px 0 0;
    padding: 0 0 0 25px;
}
.worry li{
    position: relative;
    display: block;
    padding: 0;
    margin: 8px 0;
    text-align: left;
}
.worry li:before{
    content: "";
    position: absolute;
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D7427E;
    top: 0.7em;
    left: -18px;
}
main.promo .worry img{ max-width: 94%}




.wecan{
    padding: 60px 0;
    text-align: center;
}
.wecan ul{
    width:100%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
.wecan li{
    height: 270px;
}
.wecan li img{
    display: block;
    width:100px;
    margin: 0 auto 35px;
}





.services{
    background-color: #F5F5F5;
    padding: 50px 0;
}
.services_head{
    padding: 40px 4% 10px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.services_head h1{
    font-size: 2.222em;
    font-weight: 900;
    margin: 10px 0 40px;
}
.services_head div{
    font-size: 1.222em;
}
.services_head .ic_google, .services_head .ic_fb{
    margin: 0 0.455em;
    vertical-align: -0.5em;
}
.white-page{
    background: white;
    width: 92%;
    max-width: 1600px;
    margin: 75px auto;
    border-radius: 4px;
    padding: 35px 1%;
    box-shadow: rgba(0,0,0,0.1) 0 0 5px;
}
.white-page .container{ max-width: 100%;}
.services h2{
    font-size: 1.944em;
    line-height: 1.6;
    font-weight: 700;
    margin: 0 0 5%;
}
.services h2 .ic_google, .services h2 .ic_fb{ vertical-align: -0.3em}
.services .subtitle{
    font-size: 1.222em;
    margin: 0 0 6%;
}
.services h3{
    font-size: 1.111em;
    line-height: 1.7;
    margin: 0 0 7%;
    color: black;
}
.services h3.spec{
    font-size: 1.333em;
    font-weight: 700;
    margin: 11% 0 3.2%;
}
.a_service{
    margin: 120px 0;
}
.a_service:first-child{
    margin-top: 8%;
}
.a_service:last-child{
    margin-bottom: 8%;
}
ul.doit{
    background: #F5F5F5;
    border-radius: 10px;
    margin: 3% 0;
    padding: 15px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
ul.doit li{ margin: 3px;}
.services ul.doit h3{
    font-size: 20px;
    font-weight: 700;
    display: inline-block;
    margin: 0;
}
.services ul.doit li::before{
    content: "";
    display: inline-block;
    background: url(../images/ic_done_pink.svg) left center no-repeat;
    background-size: contain;
    margin: 0 8px 0 0;
    width: 24px;
    height: 24px;
    vertical-align: -5px;
}
.fb_content{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 1.111em;
    margin: 35px 0;
}
.fb_content strong{
    font-size: 1.1em;
    font-weight: 700;
    color: #D7427E;
    border-bottom: #D7427E 1px solid;
    padding: 4px 0;
}
.fb_content>div:first-child{
    flex: 0 0 240px;
    line-height: 2.1;
}
.fb_content>div:nth-child(2){
    flex: 0 1 160px;
    text-align: center;
}
.fb_content>div:last-child{
    flex: 0 1 680px;
}

.fb_content>div:nth-child(2) img{ width: 32px;}

.show-phone{ display: none}




.cases{
    max-width: 90%;
    padding: 80px 0 20px;
}
.cases h2{
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    padding: 0;
    margin-bottom: 0;
}
.cases ul{
    padding: 0;
}
.cases li{
    margin: 65px 0;
}
.cases h3{
    font-weight: 700;
    font-size: 24px;
    margin: 25px 0;
}
.cases h3::before{
    content: url(../images/ic_arrow_r_pink.svg);
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    margin: 0 13px 0 -4px;
}




@media (min-width:1800px){
    .kv{padding-left:37.5%;}
}

@media (min-width:576px) and (max-width:991px){
    .wecan li{letter-spacing: 0;}
}
/* @media (min-width:992px) and (max-width:1270px){
    .kv-inside{
        background: -moz-linear-gradient(left, rgba(246,246,246,0) 26%,rgba(246,246,246,0.8) 45%, rgba(246,246,246,1) 52%);
        background: -webkit-linear-gradient(left, rgba(246,246,246,0) 26%,rgba(246,246,246,0.8) 45%, rgba(246,246,246,1) 52%);
        background: linear-gradient(to right, rgba(246,246,246,0) 26%,rgba(246,246,246,0.8) 45%, rgba(246,246,246,1) 52%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f6f6f6', endColorstr='#f6f6f6',GradientType=1 );
    }
} */
@media (max-width:991.98px){
    .promo section{font-size: 15px;}

    .kv{ padding: 60px 25% 0 5%;}
    .kv::before{
        background: #F6F6F6 url(../images/kv_bg_r.jpeg) left center / auto 100% no-repeat;
        left: 0%;  width: 100%;
    }

    .superiority{ padding: 80px 0;}
    

    .fb_content>div:first-child{ flex-basis: 200px;}
}

@media (max-width:767.98px){
    .a_service_img{ text-align: center; margin: 0 0 9%;}
}

@media (max-width:575.98px){
    .promo section{font-size: 13px; letter-spacing: 0;}
    
    .kv{ height: 460px; padding: 60px 5% 20px;}
    .kv_title{letter-spacing: 0;}
    .kv_sub{margin-bottom: 30px;}

    .superiority h2{ width: 100%; text-align: center;}
    .superiority h3{letter-spacing: 3px;}
    .wecan{ padding-bottom:0;}
    .wecan li img{margin-bottom: 20px}
    .wecan li{ height: 240px;}

    .services{padding-bottom: 1px;}
    .services_head div{ line-height: 2.2;}
    .ic_google, .ic_fb {height: 25px;}
    .white-page{ margin: 45px auto;}
    .services h2{ font-size: 1.538em}
    .services h3.spec{ margin-top: 38px;}
    .services ul.doit h3{ font-size: 14px;}
    ul.doit{padding: 10px;}
    .services ul.doit li::before{ width:16px; height: 16px; margin-right: 4px;    vertical-align: -3px;}
    .fb_content{ flex-wrap: wrap}
    .fb_content+.fb_content{ margin-top: 60px}
    .fb_content>div{text-align: center}
    .fb_content>div:first-child{ flex-basis: 100%;} 
    .fb_content>div:nth-child(2){ flex: 0 0 100%; margin: 10px 0;}
    .fb_content>div:nth-child(2) img{ width: 24px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);}
    .fb_content>div:last-child{ flex-basis: 100%}
    .hidden-phone{ display: none;}
    .show-phone{ display: inline-block;}

    .cases{ padding-top: 50px;}
}

@media (max-width:370px){
    .superiority h3{letter-spacing: 1px;}
}